<template>
  <div class="look-box">
    <el-dialog width="400px" top="5%" v-model="dialogFormVisible" :draggable="true" @close="dialogClose" :modal="false">
      <template #header>
        <div class="dialog-head">
          <img :src="dialogForm.logoImg" alt="">
          <span>{{ dialogForm.brandName }}</span>
        </div>
      </template>
      <div class="content-box" :style="{'height':tableHeight+'px'}">
        <img style="width:100%;" :src="dialogForm.headImg" alt="">
        <div class="text-box">
          <span>{{ dialogForm.goodsName }}</span>
        </div>
        <div class="text-box2">
          <span>官方售价</span>
          <span style="color:#7F7F7F;">￥{{ numFormat(dialogForm.officialPrice/10000) || '' }}</span>
        </div>
        <div class="text-box3">
          <span>应付金额</span>
          <span style="color:#F14C40;font-size:18px;font-weight: bold;"><span
              style="font-size:14px;">￥</span>{{ numFormat(dialogForm.suggestPrice/10000) || '' }}</span>
        </div>
        <div class="fg-box"></div>
        <div class="detail-goods">
          <div class="vhtml-box" v-html="dialogForm.goodsDetail"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { getWindowWidthAndHeight, warningDeal, numFormat } from '@/utils/utils'
import api from './api'
export default {
  setup() {
    const state = reactive({
      dialogFormVisible: false,
      dialogForm: {},
      tableHeight: 0,
    })

    function getGoodsDetail(goodsId) {
      const obj = {
        goodsId
      }
      api.goodsInfoDetail(obj).then(res => {
        if (res.code == '200') {
          state.dialogForm = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function dialogShow(type, goods) {
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 300
      if (type == 1) {
        getGoodsDetail(goods)
      } else {
        state.dialogForm = { ...goods }
      }
      state.dialogFormVisible = true
    }

    return {
      ...toRefs(state),
      dialogShow,
      numFormat,
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  > img {
    width: 50px;
    max-height: 50px;
  }
}
.content-box {
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 0;
  }
}
:deep(.el-dialog__body) {
  padding: 0;
}
.text-box {
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #c0c0c0;
  margin-left: 10px;
  color: #000000;
}
.text-box2 {
  box-sizing: border-box;
  padding: 10px;
  font-size: 14px;
  border-bottom: 1px dashed #c0c0c0;
  margin-left: 10px;
  color: #000000;
  display: flex;
  justify-content: space-between;
}
.text-box3 {
  box-sizing: border-box;
  padding: 10px;
  font-size: 14px;
  margin-left: 10px;
  color: #000000;
  display: flex;
  justify-content: space-between;
}
.vhtml-box {
  width: 100% !important;
  box-sizing: border-box;
  padding: 20px;
  margin-top: 10px;
  overflow: auto;
}
.fg-box {
  width: 100%;
  height: 20px;
  background-color: #f2f2f2;
}
</style>
<style>
.vhtml-box img {
  max-width: 100% !important;
}
</style>